<template>
	<view>
		<u-popup v-model="showPop" mode="bottom" close-icon-color="#fff" closeable border-radius="28" :mask-custom-style="maskCustomStyle">
			<view class="popup" :style="{backgroundImage: 'url(' + commonData.showIntegalPopData.byaudioPopBg +')'}">
				<view class="flex-col flex-1 ml-7-5">
					<text class="self-center title">通过语音</text>
					<view class="flex-col items-center">
						<view class="opt-list-item flex-row justify-between items-center"
							v-for="(item,index) in optionList" :key="index" @click="clickOptin(index)">
							<view class="opt-list-item-lf flex-row">
								<view class="lf-img-wrap flex-row items-center">
									<image class="lf-img" :src="item.icon" mode=""></image>
								</view>
								<view class="lf-title flex-row items-center">
									{{item.title}}
								</view>
							</view>
							<view class="">
								<image class="rg-img" src="https://terminator.axu9.com/images/arrow-right-byaudio.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="flex-row justify-center" style="color: #fff;width: 690rpx;margin: 0 auto;">
						<!-- 合成音色协议 -->
						<rich-text :nodes="content"></rich-text>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	export default {
		data() {
			return {
				commonData: {},
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				showPop: false,
				optionList: [{
						icon: 'https://terminator.axu9.com/images/byaudio-jilu-icon.png',
						title: '录音',
					},
					{
						icon: 'https://terminator.axu9.com/images/byaudio-video-icon.png',
						title: '视频声音',
					},
					{
						icon: 'https://terminator.axu9.com/images/byaudio-wenjian-icon.png',
						title: '文件夹中的声音(推荐)',
					}
				],
				audioUrl: '',//音频路径
				showPop1: false,//设置标题弹窗
				// audioName: '',
				audioTitle: '',//设置音频标题名称
				videoPath: '',//视频路径
				toOptionType: 1,//跳转类型 1音视频合成 2音频库--添加音频 3作品库--添加音频
				content: `
				一、上传参考音频<br/>
				音频时长需在 10s - 120s 之间。<br/>
				音频质量有诸多要求：<br/>
				1.只能有一个人在说话，防止多个人的声音出现干扰。<br/>
				2.确保低底噪，说话人越清晰克隆效果越好，底噪会严重影响最终结果。<br/>
				3.保持音量大小、语速稳定，注意断句，避免口腔噪音如口水声，同时不能有杂音、混响等情况。<br/>
				4不能有桌椅响声、键盘鼠标敲击声、衣服摩擦声等人为噪声。<br/>
				5.音频中可以存在口误，口误时无需终止录音，停顿 1 - 2 秒后继续录制即可。<br/>
				6.音频内容方面，录制前先确定好声音风格并尽量贴近，避免情绪韵律平淡。若希望克隆出的7.声音情绪饱满、韵律有起伏，应上传表现力强的音频。<br/>
				8.音频格式支持 mp3、m4a、wav 文件格式，且文件大小不超过 20M。<br/>
				二、预览效果<br/>
				音频上传后，要先预览试听声音效果。若不满意，可重新上传新音频进行训练，训练次数为5次，取最后一次使用，应保证音频符合上述要求。<br/>
				三、次数消耗<br/>
				一经购买，概不退货。<br/>`
			}
		},
		mounted() {
			this.commonData = commonData;
		},
		methods: {
			open(){
				this.showPop = true;
			},
			close(){
				this.showPop = false;
			},
			// uploadAudio(filePath,fileName){
			// 	var _this = this;
			// 	_this.$upload(filePath).then(res => {
			// 		console.log(res, 'uploadImg')
			// 		if(res.data.errno == 1){
			// 			_this.audioUrl = res.data.img
			// 			// _this.audioName = fileName
			// 			console.log(_this.audioUrl, '上传音频')
			// 			// _this.showPop1 = true;
			// 			_this.$emit('clickOption',2);
			// 			_this.showPop = false;
			// 			// _this.$refs.audiotitle.open();
			// 			// uni.reLaunch({
			// 			// 	url: '/pages/create/index?audioName=' + fileName + '&audioUrl=' + _this.audioUrl
			// 			// })
			// 		}else {
			// 			uni.showToast({
			// 				title: res.data.message,
			// 				icon: 'none'
			// 			})
			// 		}
					
								
			// 	}).catch(err => {
			// 		console.log(err,'err')
					
			// 	})
			// },
			clickOptin(index) {
				console.log(index, '走了')
				if(index == 0){
					// uni.navigateTo({
					// 	url: '/pagesCreate/addAudio/index?videoPath=' + this.videoPath + '&toAddType=4' + '&toOptionType='+ this.toOptionType
					// })
					this.$emit('clickOption',0)
				}else if (index == 1) {
					uni.showToast({
						title: '开发中',
						icon: 'none'
					})
				}else if (index == 2) {
					this.$emit('clickOption',2);
					// uni.chooseVideo
					// // #ifdef MP
					// var _this = this;
					// wx.chooseMessageFile({
					// 	count: 1, // 默认99
					// 	type: 'file', // 选择文件的类型
					// 	extension: ['mp3', 'm4a', 'amr', 'wav'], // 选择文件的扩展名
					// 	// extension: ['.m﻿4a', '.mp3'],
					// 	success: function(res) {
					// 		const filePath = res.tempFiles[0].path; // 获取音频文件的临时路径
					// 		// const fileName = res.tempFiles[0].name;
					// 		console.log(res, 'res')
					// 		_this.uploadAudio(filePath);
							
					// 	}
					// });
					// // #endif
			
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);
</style>
<style lang="scss" scoped>
	

	.ml-2-5 {
		margin-left: 5rpx;
	}

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.page {
		padding: 35rpx 20rpx 736rpx;
		background-color: #111113;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image {
		margin-left: 42rpx;
		margin-right: 13rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		margin-top: 46rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.list {
		margin-top: 25rpx;
		/* padding: 0 10rpx; */
		width: 710rpx;
	}

	.section {
		padding: 4rpx 10rpx 24rpx;
		border-radius: 24rpx;
		background-image: url('https://terminator.axu9.com/images/add-audio-list-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group_2 {
		padding-top: 22rpx;
		width: 229rpx;
	}

	.image-wrapper_2 {
		padding: 41rpx 0 36rpx;
		border-radius: 17rpx;
		background-image: url('https://terminator.axu9.com/images/add-audio-rg-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 124rpx;
	}

	.image_4 {
		width: 71rpx;
		height: 74rpx;
	}

	.image-wrapper {
		padding: 21rpx 0 29rpx;
		border-radius: 17rpx;
		background-image: url('https://terminator.axu9.com/images/add-audio-lf-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 140rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 0;
	}

	.image_3 {
		width: 112rpx;
		height: 124rpx;
	}

	.group_3 {
		margin-left: 50rpx;
		margin-top: 69rpx;
		width: 220rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.font_3 {
		font-size: 18rpx;
		font-family: PingFang SC;
		line-height: 17rpx;
		color: #999999;
	}

	.ml-75 {
		margin-left: 75rpx;
	}

	.section_2 {
		/* margin-left: 73rpx; */
		margin-top: 72rpx;
		padding: 18rpx 18rpx 15rpx 22rpx;
		background-image: linear-gradient(90deg, #ddf9f1 0%, #b9fed5 100%);
		border-radius: 28rpx;
		height: 56rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		color: #010101;
	}

	.image_5 {
		width: 10rpx;
		height: 15rpx;
	}

	/* 弹窗 */
	.popup {
		width: 100%;
		height: 668rpx;
		// background-image: url('https://terminator.axu9.com/images/byaudio-pop-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}

	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 100rpx;
		font-weight: 500;
		color: #ffffff;
		height: 100rpx;
	}

	.opt-list-item {
		background-color: #282c33;
		border-radius: 24rpx;
		height: 143rpx;
		border: 1rpx solid #4d4f53;
		width: 690rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
	}

	.opt-list-item:first-child .lf-img {
		width: 32rpx;
		height: 45rpx;
	}

	.opt-list-item:last-child .lf-img {
		width: 36rpx;
		height: 31rpx;
	}

	.lf-title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		margin-left: 20rpx;
	}

	.lf-img {
		width: 35rpx;
		height: 30rpx;
	}

	.rg-img {
		width: 11rpx;
		height: 20rpx;
	}
	
	
	.title1 {
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	  font-weight: 500;
	  color: #ffffff;
	}
	.input-wrap {
		 padding: 41rpx 0;
		  border-radius: 16rpx;
		  width: 542rpx;
		  border: 1rpx solid #ffffff;
		  margin-top: 35rpx;
	}
	.input-class1 {
		 margin-left: 30rpx;
		  color: #ffffff;
		  font-size: 28rpx;
		  font-family: PingFang SC;
		  line-height: 26rpx;
	}
	.input-placeholder1 {
		/* margin-left: 30rpx; */
		 color: #ffffff;
		 font-size: 28rpx;
		 font-family: PingFang SC;
		 line-height: 26rpx;
	}
	
	.content1 {
	  margin-left: 6rpx;
	  color: #ffffff;
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 54rpx;
	  text-align: center;
	  height: 270rpx;
	  overflow-y: scroll;
	}
	.bottom {
	  margin-top: 26rpx;
	}
	.text_agree {
	  color: #ffffff;
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	}
	.bottom-btn {
	  margin-top: 35rpx;
	}
	.agree-btn {
	  padding: 34rpx 0;
	  flex: 1 1 257rpx;
	  border-radius: 16rpx;
	  height: 102rpx;
	  border-left: solid 2rpx #00e586;
	  border-right: solid 2rpx #00e586;
	  border-top: solid 2rpx #00e586;
	  border-bottom: solid 2rpx #00e586;
	}
	.font-noagree {
		color: #00e586;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	
	.noagree-btn {
	  margin-right: 5rpx;
	  padding: 34rpx 0;
	  flex: 1 1 257rpx;
	  background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
	  border-radius: 16rpx;
	  height: 100rpx;
	}
</style>
